<template>
	<view class="my_container">
		<CustomNavbarTwo title="搜索" />
		<view class="header">
			<view class="input-wrap">
				<u--input @confirm="handleConfirm" v-model="nickName" border="none" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" shape="circle" placeholder="请输入会员名称"
					clearable></u--input>
			</view>
			<view @tap="handleCancel" class="btn">取消</view>
		</view>
		<view class="list-wrap">
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item.userId)">
				<view class="head">
					<image class="item-img" :src="item.avatar" mode="aspectFill"></image>
					<view class="item-info">
						<view class="item-title">
							<text class="title-text">{{ item.nickName }}</text>
							<text class="member-tag">{{ item.vipTypeName }}</text>
						</view>
						<view class="item-details">
							<text class="item-meta">联系方式: ******</text>
							<text class="item-right">主营: {{ item.industry }}</text>
						</view>
						<view class="abc">
							<image class="view_imag" src="../../static/imags/ditu.png"></image>
							<text class="abc_o">地址: {{showLocation(item.province,item.city) }}
							</text>
							<text class="abc_t">{{ item.createTime }}</text>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="num-list">
						<view class="text">发布</view>
						<view class="show">{{ item.pubInfoCount }}</view>
					</view>
					<view class="num-list">
						<view class="text">浏览</view>
						<view class="show">{{ item.watchCount }}</view>
					</view>
					<view class="num-list">
						<view class="text">粉丝</view>
						<view class="show">{{ item.fansCount }}</view>
					</view>
					<view class="num-list">
						<view class="text">点赞</view>
						<view class="show">{{ item.likeCount }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
			<u-loadmore icon :status="status" />
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import locationFormatter from '@/util/locationFormatter';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				nickName: '',
				status: 'loading',
				pageSize: 20,
				pageNum: 1,
				total: 0,
				show: true,
				bannerList: [],
				dataList: [],
				wastePaperList: [],
				wastePlasticList: [],
				deviceList: [],
				shadowStyle: {
					backgroundImage: 'none',
					paddingTop: '0',
					marginTop: '20rpx'
				},
				showSex: false
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.total == this.wastePaperList.length + this.wastePlasticList.length + this.deviceList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getList();
		},
		methods: {
			//格式化地址
			showLocation(pro, city) {
				let displayName
				if (pro && city) {
					displayName = locationFormatter.format(pro, city);
				} else {
					displayName = '未知'
				}
				return displayName;
			},
			handleConfirm() {
				this.getList();
			},
			//取消
			handleCancel() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/page/detail/index?id=' + id
				});
			},
			//获取列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					nickName: this.nickName,
				};
				this.$https.post(this.$api.getPubUserPage, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.dataList = [];
						}
						this.total = res.total;
						this.dataList = [...this.dataList, ...res.rows];
						uni.hideLoading();
						if (this.total == 0 || this.total == res.rows.length) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(userId) {
				uni.navigateTo({
					url: '/page/market/index?id=' + userId
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		height: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx;

		.header {
			padding-top: 196rpx;
			display: flex;
			align-items: center;
			width: calc(100% - 30rpx);
			position: fixed;
			background-color: #fff;
			z-index: 9;

			.input-wrap {
				flex: 1;

				::v-deep .u-input {
					padding: 10rpx 20rpx !important;
					background-color: #f6f6f6;
				}
			}

			.btn {
				width: 120rpx;
				text-align: center;
				color: #989898;
			}
		}

		.list-wrap {
			margin-top: 300rpx;
			padding-bottom: 40rpx;

			.item {
				width: 686rpx;
				height: 264rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 24rpx;

				.head {
					display: flex;
					height: 170rpx;

					.item-img {
						margin-top: 28rpx;
						width: 104rpx;
						height: 104rpx;
						border-radius: 50rpx;
						margin-left: 28rpx;
					}

					.item-info {
						width: 506rpx;
						margin-left: 24rpx;
						height: 170rpx;

						.item-title {
							display: flex;
							height: 44rpx;
							margin-top: 34rpx;
							width: 506rpx;

							.title-text {
								font-size: 32rpx;
								color: #333333;
								font-weight: bold;
								height: 48rpx;
								line-height: 48rpx;
							}

							.member-tag {
								font-size: 24rpx;
								color: red;
								margin-left: 14rpx;
								border: 1rpx solid red;
								font-weight: 400;
								font-size: 20rpx;
								color: #ed6e3e;
								line-height: 28rpx;
								text-align: center;
								padding: 0 10rpx;
								height: 32rpx;
								border-radius: 100rpx 100rpx 100rpx 100rpx;
								border: 1rpx solid #ed6e3e;
								margin-top: 8rpx;
							}
						}

						.item-details {
							font-size: 24rpx;
							color: #666;
							margin: 10rpx 0;
							width: 506rpx;
							height: 34rpx;
							line-height: 34rpx;
							display: flex;

							.item-meta {
								width: 300rpx;
								text-align: left;
							}

							.item-right {
								width: 206rpx;
								text-align: right;
							}
						}

						.abc {
							display: flex;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							height: 34rpx;
							width: 506rpx;

							.view_imag {
								width: 28rpx;
								height: 28rpx;
								margin-top: 3rpx;
							}

							.abc_o {
								height: 34rpx;
								line-height: 34rpx;
								width: 240rpx;
								height: 34rpx;
								text-align: left;
							}

							.abc_t {
								width: 239rpx;
								height: 34rpx;
								height: 34rpx;
								line-height: 34rpx;
								text-align: right;
							}
						}
					}
				}

				.footer {
					padding: 0 30rpx;
					height: 94rpx;
					display: flex;
					justify-content: space-between;

					.num-list {
						display: flex;
						justify-content: space-between;

						.text {
							height: 94rpx;
							line-height: 94rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 24rpx;
							color: #a3a3a3;
							text-align: left;
						}

						.show {
							margin-left: 10rpx;
							height: 94rpx;
							line-height: 94rpx;
						}
					}
				}
			}
		}
	}
</style>